1、首先Modal是一个内容窗格、通常用来做一个选择或编辑。

先来看一下 tabs.html 做了什么。

/* --- tabs.html ----*/ 
        
       
        Modals
       
       
         
           
        
               Hobbits    
            
              Gollum        
              Frodo Baggins        
              Sam      
        
       /* --- tabs.html ----*/

上述常见了 3个 item 并对每个 item监听了一个 click方法 传了一个参数。 来看 tabs.js

/* --- tabs.js ----*/ import { Modal, NavController, Page} from 'ionic-angular';import { ModalsContentPage } from './modal.js' @Page({  templateUrl: 'build/pages/tabs/tabs.html',}) export class TabsPage {   static get parameters() {    return [[NavController]];  }     constructor(nav) {      this.nav = nav;  }   openModal(characterNum) {     let modal = Modal.create(ModalsContentPage, characterNum);    this.nav.present(modal);   } } /* --- tabs.js ----*/

首先 我导入了。import { Modal, NavController, Page } from 'ionic-angular';  page不用说啦。

还记得。navController么？他是用来控制路由的 。我记得原来 用他路由传参数是。

this

.nav.push( ItemDetailsPage , {

       

item: item

});

 

那这里用的是 this.nav.present(modal); 看完以前的章节 可以得知当创建loading alert的时候 他都用的是 present 而不是 push那代表着。其实他本身并不是导航到另一个路由

而是变成一个层。覆盖到 我们的页面之上。这点要记住。Modal.create的方法接受个两个参数 一个是组件。一个就是我们的参数。。我们在来看 modal.js 是怎么接收这个参数的。

/* --- modal.js ----*/ import { NavParams, Page,ViewController} from 'ionic-angular'; @Page({    templateUrl: 'build/pages/tabs/modal.html',})export class ModalsContentPage {    static get parameters() {        return [[NavParams],[ViewController]];    }     constructor(params,viewCtrl) {        this.params = params;        this.viewCtrl = viewCtrl;        var characters = [            {                name: 'Gollum',                quote: 'Sneaky little hobbitses!',                image: 'img/1.jpg',                items: [                    { title: 'Race', note: 'Hobbit' },                    { title: 'Culture', note: 'River Folk' },                    { title: 'Alter Ego', note: 'Smeagol' }                ]            },            {                name: 'Frodo',                quote: 'Go back, Sam! I\'m going to Mordor alone!',                image: 'img/1.jpg',                items: [                    { title: 'Race', note: 'Hobbit' },                    { title: 'Culture', note: 'Shire Folk' },                    { title: 'Weapon', note: 'Sting' }                ]            },            {                name: 'Samwise Gamgee',                quote: 'What we need is a few good taters.',                image: 'img/1.jpg',                items: [                    { title: 'Race', note: 'Hobbit' },                    { title: 'Culture', note: 'Shire Folk' },                    { title: 'Nickname', note: 'Sam' }                ]            }        ];        this.character = characters[this.params.get('charNum')];    }     dismiss() {        this.viewCtrl.dismiss();    }} /* --- modal.js ----*/

首先呢 我导入了。

import { NavParams, Page, ViewController } from 'ionic-angular';

同样的 虽说我们路由的导航 从 this.nav.push( )变成了 this.nav.present() 但是我们从接收参数的方法并没有改变。我们同样是用this.params.get('charNum')获取参数

1、解析一下 constructor里的代码 

     1、

var 

characters 其实就是获取一个局部变量里面的数组就是数据。

  2、

this

.params.get(

'charNum'

) 获取一个参数 在 tabs.html 里我们得知他的参数返回一个number类型。 所以获取到了 

var 

characters 数组中的一条数据

    3、

this

.character 其实就相当于 ng1中的 

$scope.character 他本身跟局部变量 

var 

characters 并没有关系，所以这里把得到的数据 给作用域 

this

.character

2、来看 dismiss 方法 this.viewCtrl.dismiss(); viewCtrl : ViewController 中的 ViewController  他又是啥呢？ 因为 modal 他的创建 是覆盖页面变成一个层 ，所以把这个层去除掉的时候

就需要用到 

this

.viewCtrl.dismiss();这个方法了。之后在来看 modal.html页面。

/* --- modal.html ----*/ 
            
         
                  Description    
         
         
            
                 
                      
                           
                        
                       
           
{
      {character.name}}
            
           
{
      {character.quote}}
        
                   
          
                       {
       {item.title}}            
           
                            {
       {item.note}}            
                   
              
             
         关闭 modal
         /* --- modal.html ----*/

最终效果：